<script lang="ts" setup>
import { defineProps, ref } from 'vue' 
import { timeAbbreviation } from '@/utils/time'

import type { DefaultDetailData, Durl } from '@/TypingMore/VideoTyping'
import type { Episodes, FIntroduction, MainSection } from '@/TypingMore/SeasonTyping'

const props = defineProps<{
    introductionData: FIntroduction
    videoData: DefaultDetailData
}>()

const open = ref(false)

</script>

<template>
     <div class=" flex relative p-3 text-xs text-gray-400" v-if="videoData?.data?.View.redirect_url">
                <img :src="introductionData.cover" class=" w-20 rounded-md h-24 mr-3">
                <div class=" flex ">
                    <div class=" mr-3">
                        <h2 class=" mb-1 text-base text-black w-48 overflow-hidden whitespace-nowrap text-ellipsis">{{
                                introductionData.title
                        }}</h2>
                        <div class=" flex items-center mb-1">
                            <p class="flex items-center mr-3"><span class="iconfont icon-bofangshu"></span><span>{{
                                    timeAbbreviation(introductionData.stat?.views)
                            }}</span></p>
                            <p class=" flex items-center">
                                <van-icon name="like-o" /><span>{{ timeAbbreviation(introductionData.stat?.favorites)
                                }}</span>
                            </p>
                        </div>
                        <p class=" mb-1">{{ introductionData.new_ep?.desc }}</p>
                        <p class=" mb-1 whitespace-pre-wrap not-ellipsis h-4 text-ellipsis overflow-hidden"
                            :style="open ? 'height: auto;' : ''" @click="open = !open">{{
                                    introductionData.evaluate
                            }}</p>
                    </div>
                    <div class=" flex flex-col justify-center absolute top-0 right-0">
                        <p class=" text-lg score">{{ introductionData.rating?.score ? introductionData.rating?.score
                                : ''
                        }} <span class=" text-xs">{{ introductionData.rating?.score ? '分' : '' }}</span></p>
                        <p>{{ introductionData.rating?.count ? timeAbbreviation(introductionData.rating?.count) + '人' :
                                ''
                        }}</p>
                    </div>
                </div>
            </div>
</template>

<style scoped> 
.score {
    color: #FFA726;
}
</style>